<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      display: flex;
      flex-direction: column;
    }
    p{
      height: 100px;
    }
  </style>
</head>

<body>
  <div class="box">
    <p>摄影素材网,「摄图网」1亿张原创设计图片下载,高清摄影图,精美插画,设计素材,智能搜索,海量齐全图库.摄影素材网,加入我们享终身任意下载.</p>
    <p>摄影素材网,「摄图网」1亿张原创设计图片下载,高清摄影图,精美插画,设计素材,智能搜索,海量齐全图库.摄影素材网,加入我们享终身任意下载.</p>
    <p>摄影素材网,「摄图网」1亿张原创设计图片下载,高清摄影图,精美插画,设计素材,智能搜索,海量齐全图库.摄影素材网,加入我们享终身任意下载.</p>
    <p>摄影素材网,「摄图网」1亿张原创设计图片下载,高清摄影图,精美插画,设计素材,智能搜索,海量齐全图库.摄影素材网,加入我们享终身任意下载.</p>
    <p>摄影素材网,「摄图网」1亿张原创设计图片下载,高清摄影图,精美插画,设计素材,智能搜索,海量齐全图库.摄影素材网,加入我们享终身任意下载.</p>
    <p>摄影素材网,「摄图网」1亿张原创设计图片下载,高清摄影图,精美插画,设计素材,智能搜索,海量齐全图库.摄影素材网,加入我们享终身任意下载.</p>
    <img data-src="https://imgs.699pic.com/images/507/745/548.jpg!list1x.v2" />
    <img data-src="https://imgs.699pic.com/images/507/745/548.jpg!list1x.v2" />
    <img data-src="https://imgs.699pic.com/images/507/745/548.jpg!list1x.v2" />
    <p>摄影素材网,「摄图网」1亿张原创设计图片下载,高清摄影图,精美插画,设计素材,智能搜索,海量齐全图库.摄影素材网,加入我们享终身任意下载.</p>
    <p>摄影素材网,「摄图网」1亿张原创设计图片下载,高清摄影图,精美插画,设计素材,智能搜索,海量齐全图库.摄影素材网,加入我们享终身任意下载.</p>
    <p>摄影素材网,「摄图网」1亿张原创设计图片下载,高清摄影图,精美插画,设计素材,智能搜索,海量齐全图库.摄影素材网,加入我们享终身任意下载.</p>
    <p>摄影素材网,「摄图网」1亿张原创设计图片下载,高清摄影图,精美插画,设计素材,智能搜索,海量齐全图库.摄影素材网,加入我们享终身任意下载.</p>
    <p>摄影素材网,「摄图网」1亿张原创设计图片下载,高清摄影图,精美插画,设计素材,智能搜索,海量齐全图库.摄影素材网,加入我们享终身任意下载.</p>
    <p>摄影素材网,「摄图网」1亿张原创设计图片下载,高清摄影图,精美插画,设计素材,智能搜索,海量齐全图库.摄影素材网,加入我们享终身任意下载.</p>
    <img data-src="https://imgs.699pic.com/images/507/745/548.jpg!list1x.v2" />
    <img data-src="https://imgs.699pic.com/images/507/745/548.jpg!list1x.v2" />
    <img data-src="https://imgs.699pic.com/images/507/745/548.jpg!list1x.v2" />
  </div>
</body>
<!-- 该方法会多次触发,不建议使用 -->
<!-- <script>
  const imags = document.querySelectorAll('img')
  const innerHeight = window.innerHeight
  // 分析图片距离顶部的距离大于可视区的高度的时候图片不加载，小于等于的时候加载,所以把图片src改造成dada-src
  window.addEventListener('scroll',function(e) {
    console.log(window.innerHeight)
    imags.forEach(image=>{
      const imageTop = image.getBoundingClientRect().top
      if(imageTop<=innerHeight) {
        const data_src = image.getAttribute('data-src')
        image.setAttribute('src',data_src)
      }
      console.log('触发');
    })
  })
</script> -->
<!-- 使用IntersectionObserver 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗交叉状态的方法。 -->
<script>
  const imags = document.querySelectorAll('img')
  const observer = new IntersectionObserver(entries=>{
    entries.forEach(entry=>{
      if(entry.isIntersecting) {
        const image = entry.target
        const data_src = image.getAttribute('data-src')
        image.setAttribute('src',data_src)
        observer.unobserve(image)
        console.log('触发');
      }
      
    })
  })
  imags.forEach(image=>{
    observer.observe(image)
  })
</script>
</html>